<template>
  <div class="top">
    <!-- 天气 -->
    <div class="top-weather">
      <span class="top-weather-cloud">多云</span>
      <span class="top-weather-temperature">12℃</span>
    </div>
    <!-- 标题 -->
    <div class="top-title">北京市大兴区公交系统平台</div>
    <!-- 时间 -->
    <div class="top-date">
      <span class="top-date-time">{{ timeVal }}</span>
      <span class="top-date-ytd">{{ dateVal }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
const dateVal = ref();
const timeVal = ref();
// 创建定时器
let timeInter: any;
// 获取年月日
const getDate = () => {
  let time = new Date();
  dateVal.value = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate();
};
// 获取时分秒
const getTime = () => {
  let time = new Date();
  timeVal.value = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
};
onMounted(() => {
  getDate();
  timeInter = setInterval(() => {
    getTime();
  }, 1000);
});
// 在组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
  clearInterval(timeInter);
});
</script>

<style lang="scss" scoped>
.top {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 1920px;
  height: 97px;
  background: url(@/assets/images/getimagebyid.png) no-repeat;
  background-size: 100% 100%;
  .top-weather {
    position: absolute;
    top: 55px;
    left: 43px;
    color: #fff;
    font-size: 16px;
    .top-weather-cloud {
      margin-left: 10px;
    }
    .top-weather-temperature {
      margin-left: 20px;
      letter-spacing: 1px;
    }
  }
  .top-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 97px;
    text-align: center;
    background: linear-gradient(to bottom, #ffff, #f8fdff, #acf5ff, #67eeff, #24d8ff);
    -webkit-background-clip: text;
    color: transparent;
  }
  .top-date {
    position: absolute;
    top: 55px;
    right: 43px;
    color: #fff;
    font-size: 16px;
    .top-date-time {
      font-size: 20px;
    }
    .top-date-ytd {
      margin-left: 30px;
      font-size: 10px;
      color: rgb(175, 195, 224);
    }
  }
}
</style>
